Angular Material হল Angular অ্যাপ্লিকেশনের জন্য একটি UI কম্পোনেন্ট লাইব্রেরি যা আপনাকে প্রস্তুত তৈরি কম্পোনেন্টগুলোর মাধ্যমে একটি সুন্দর এবং ব্যবহারকারী-বান্ধব ইন্টারফেস তৈরি করতে সাহায্য করে। Angular Material থিমিং আপনাকে একটি কাস্টম স্টাইল এবং লুক অ্যান্ড ফিল (Look and Feel) প্রদান করতে সাহায্য করে।

Angular Material এর থিমিং সিস্টেমটি অত্যন্ত ফ্লেক্সিবল এবং আপনি বিভিন্ন রঙের স্কিম ব্যবহার করতে পারেন, যা সহজেই কাস্টমাইজ করা যায়। Angular Material থিমগুলি primary, accent, এবং warn রঙের ভিত্তিতে কাজ করে, যা একটি অ্যাপ্লিকেশনকে একটি নির্দিষ্ট রঙের স্কিম অনুযায়ী সাজানোর সুবিধা দেয়।

Angular Material থিমিংয়ের উপাদান

Angular Material থিমিং সিস্টেমের কিছু মূল উপাদান হল:

1. Primary, Accent, এবং Warn রঙ:
   • Primary: প্রধান রঙ যা অ্যাপ্লিকেশনের স্নিগ্ধ এবং প্রাথমিক স্টাইলিংয়ের জন্য ব্যবহৃত হয়।
   • Accent: secondary বা highlight রঙ যা বিভিন্ন UI এলিমেন্টের জন্য ব্যবহৃত হয়, যেমন বাটন বা লিংক।
   • Warn: সতর্কতা বা ইরর রঙ, সাধারণত সতর্কতা বার্তা বা ইরর স্টেটসের জন্য ব্যবহৃত হয়।
2. Theme (মূল থিম) এবং Dark Theme (ডার্ক থিম):
   • আপনি আপনার অ্যাপ্লিকেশনের জন্য Light এবং Dark থিম কনফিগার করতে পারেন।

Angular Material থিম কাস্টমাইজ করা

Angular Material-এ থিম কাস্টমাইজ করার জন্য SCSS (Sass) ব্যবহার করতে হয়। এই কাজটি styles.scss বা আপনার থিম ফাইলের মাধ্যমে করা যেতে পারে।

1. ডিফল্ট Material থিম ব্যবহার

Angular Material ডিফল্টভাবে একটি থিম তৈরি করে, তবে আপনি এটি পরিবর্তন করতে পারেন। প্রথমে, আপনার অ্যাপ্লিকেশনে Angular Material ইনস্টল করতে হবে।

ng add @angular/material

এটি একটি ডিফল্ট থিম এবং অন্যান্য কম্পোনেন্ট লাইব্রেরি ইনস্টল করবে।

styles.scss ফাইলে ডিফল্ট থিম যোগ করা যাবে:

@import '~@angular/material/theming';
@include mat-core();

// Defining your custom theme
$my-primary: mat-palette($mat-indigo);
$my-accent: mat-palette($mat-pink, 500);
$my-warn: mat-palette($mat-red);

$my-theme: mat-light-theme($my-primary, $my-accent, $my-warn);

// Applying the theme
@include angular-material-theme($my-theme);

এখানে:

• mat-palette() ফাংশনটি রঙের প্যালেট তৈরি করতে ব্যবহৃত হয়।
• mat-light-theme() অথবা mat-dark-theme() ব্যবহার করে আপনি লাইট অথবা ডার্ক থিম নির্বাচন করতে পারেন।
• angular-material-theme() হল থিমটি অ্যাপ্লিকেশনে প্রয়োগ করার জন্য।

2. Dark Theme কাস্টমাইজ করা

Angular Material এ ডার্ক থিম প্রয়োগ করতে, আপনি সহজেই mat-dark-theme ব্যবহার করতে পারেন।

$my-primary: mat-palette($mat-blue);
$my-accent: mat-palette($mat-orange);
$my-warn: mat-palette($mat-deep-orange);

$my-dark-theme: mat-dark-theme($my-primary, $my-accent, $my-warn);

@include angular-material-theme($my-dark-theme);

এখানে, mat-dark-theme() ব্যবহার করে আপনি ডার্ক থিম তৈরি করেছেন। এই থিমটি অ্যাপ্লিকেশনের সকল Material কম্পোনেন্টে ডার্ক মোড প্রয়োগ করবে।

3. থিম পরিবর্তন করার জন্য কাস্টম রঙের প্যালেট

আপনি যদি সম্পূর্ণ কাস্টম রঙ ব্যবহার করতে চান, তবে mat-palette() এর মধ্যে কাস্টম রঙের কোড ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

$my-primary: mat-palette($mat-teal, 600, 300, 900);
$my-accent: mat-palette($mat-orange, 500);
$my-warn: mat-palette($mat-red);

$my-custom-theme: mat-light-theme($my-primary, $my-accent, $my-warn);

@include angular-material-theme($my-custom-theme);

এখানে mat-palette() এর মধ্যে রঙের কোডের বিভিন্ন শেড (যেমন 600, 300, 900) ব্যবহার করা হয়েছে।

4. Theme Switching (থিম পরিবর্তন)

আপনি যদি অ্যাপ্লিকেশনের মধ্যে লাইট এবং ডার্ক থিমের পরিবর্তন করতে চান, তবে আপনি JavaScript বা TypeScript ব্যবহার করে থিম সুইচিং করতে পারেন। উদাহরণস্বরূপ:

TypeScript ফাইলে থিম পরিবর্তন কোড:

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  constructor(private sanitizer: DomSanitizer) { }

  switchTheme(isDark: boolean) {
    const themeLink = document.getElementById('theme-link') as HTMLLinkElement;
    if (isDark) {
      themeLink.href = 'assets/themes/dark-theme.css';
    } else {
      themeLink.href = 'assets/themes/light-theme.css';
    }
  }
}

এখানে, আপনি switchTheme() ফাংশন ব্যবহার করে থিম পরিবর্তন করছেন, যেখানে একটি CSS ফাইলের রেফারেন্স দিয়ে আপনি অ্যাপ্লিকেশনটি ডার্ক থিম বা লাইট থিমে সুইচ করতে পারবেন।

সারাংশ

Angular Material থিমিং সিস্টেম একটি শক্তিশালী টুল যা আপনার অ্যাপ্লিকেশনকে সুন্দর এবং ব্যবহারকারী-বান্ধব করে তোলে। আপনি Angular Material-এর থিম কাস্টমাইজ করে একটি ইউনিফর্ম UI তৈরি করতে পারেন এবং ডার্ক অথবা লাইট থিমে পরিবর্তন করতে পারেন। থিমিংয়ের মাধ্যমে অ্যাপ্লিকেশনের রঙ স্কিম সহজেই কাস্টমাইজ করা সম্ভব, যা আপনার ব্র্যান্ড বা অ্যাপ্লিকেশনের স্টাইল অনুযায়ী মানানসই হয়।